.data-table {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    
    &__header {
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    &__title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }
    
    &__count {
        font-size: 12px;
        color: #6b7280;
        background-color: #f3f4f6;
        padding: 4px 8px;
        border-radius: 12px;
    }
    
    &__filters {
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        background-color: #fafafa;
    }
    
    &__search {
        margin-bottom: 12px;
    }
    
    &__search-input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease;
        
        &:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        &::placeholder {
            color: #9ca3af;
        }
    }
    
    &__filter-row {
        display: flex;
        gap: 12px;
    }
    
    &__filter-select {
        flex: 1;
        padding: 6px 10px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 12px;
        background-color: white;
        outline: none;
        cursor: pointer;
        transition: border-color 0.2s ease;
        
        &:focus {
            border-color: #667eea;
        }
    }
    
    &__content {
        flex: 1;
        overflow: auto;
    }
    
    &__table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    
    &__th {
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #374151;
        background-color: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
        
        &--sortable {
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease;
            
            &:hover {
                background-color: #f3f4f6;
            }
        }
    }
    
    &__sort-icon {
        margin-left: 4px;
        font-size: 12px;
        opacity: 0.6;
    }
    
    &__row {
        transition: background-color 0.2s ease;
        
        &:hover {
            background-color: #f9fafb;
        }
        
        &:nth-child(even) {
            background-color: #fafafa;
            
            &:hover {
                background-color: #f3f4f6;
            }
        }
    }
    
    &__td {
        padding: 12px 16px;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
        
        &--name {
            font-weight: 500;
            color: #111827;
        }
        
        &--value {
            font-weight: 600;
            color: #059669;
            text-align: right;
        }
        
        &--date {
            color: #6b7280;
            font-size: 12px;
        }
    }
    
    &__category {
        display: inline-block;
        padding: 2px 8px;
        background-color: #e0e7ff;
        color: #3730a3;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
    }
    
    &__status {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
        
        &--success {
            background-color: #dcfce7;
            color: #166534;
        }
        
        &--error {
            background-color: #fee2e2;
            color: #991b1b;
        }
        
        &--warning {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        &--default {
            background-color: #f3f4f6;
            color: #374151;
        }
    }
    
    &__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #6b7280;
        text-align: center;
        padding: 40px 20px;
        
        &-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        
        p {
            margin: 4px 0;
            
            &:first-of-type {
                font-weight: 500;
                color: #374151;
                font-size: 16px;
            }
        }
        
        &-tip {
            font-size: 14px;
            opacity: 0.8;
        }
    }
}

// 滚动条样式
.data-table__content {
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
        
        &:hover {
            background: #9ca3af;
        }
    }
    
    &::-webkit-scrollbar-corner {
        background: transparent;
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .data-table {
        &__th,
        &__td {
            padding: 8px 12px;
            font-size: 12px;
        }
        
        &__filters {
            padding: 12px 16px;
        }
        
        &__header {
            padding: 12px 16px;
        }
    }
}

@media (max-width: 768px) {
    .data-table {
        &__filter-row {
            flex-direction: column;
        }
        
        &__table {
            font-size: 11px;
        }
        
        &__th,
        &__td {
            padding: 6px 8px;
        }
        
        &__th {
            &:nth-child(n+4) {
                display: none;
            }
        }
        
        &__td {
            &:nth-child(n+4) {
                display: none;
            }
        }
    }
}

// 表格动画效果
.data-table__row {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}